﻿
/**************************字体开始**********************/
@docbg: #f7f7f7;
@docfont: 14px SimSun;
/**************************字体结束**********************/

/**************************定位开始**********************/
@floatl: left;
@floatr: right;

@black-50: darken(#fff, 50%);
@text-color: @black-50;
// Forms
@input-color-placeholder: lighten(@text-color, 25%);

.inBlcok () {
    display: inline-block;
}

.blcok () {
    display: block;
}

.sfl {
    float: @floatl;
}

.sfr {
    float: @floatr;
}

//Horizontal Center
.HorizontalCenter(@width) {
    margin: 0 auto;
    position: relative;
    width: @width;
}
/**************************定位结束**********************/

/**************************BOX开始**********************/

.width(@val: 10px) {
    width: @val;
}

.height(@val: 10px) {
    height: @val;
}

.widthAndHeiht(@wval: 10px,@hval: 10px) {
    .width(@wval);
    .height(@hval);
}

.minWidth(@val: 100px) {
    min-width: @val;
}

.minHeight(@val: 100px) {
    min-height: @val;
}

.minWidthAndHeiht(@wval: 10px,@hval: 10px) {
    .minWidth(@wval);
    .minHeight(@hval);
}

.minMaxW(@minW: 1000px,@maxW: 1000px) {
    max-width: @maxW;
    min-width: @minW;
}

.padding(@ptop: 0,@pright: 0,@pbottom: 0,@pleft: 0) {
    padding: @arguments;
}

.margin(@mtop: 0,@mright: 0,@mbottom: 0,@mleft: 0) {
    margin: @arguments;
}

.border(@width: 0,@style: 0,@color: 0) {
    border: @arguments;
}

.border-radius (@radius: 5px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
}

.box-shadow (@x: 0, @y: 0, @blur: 1px,@spread: 0, @color: #000) {
    -moz-box-shadow: @arguments;
    -webkit-box-shadow: @arguments;
    box-shadow: @arguments;
}

/**************************BOX结束**********************/



body {
    background: @docbg;
    font: @docfont;
}

.bfc {
    overflow: hidden;
    zoom: 1;
}

    .bfc:before,
    .bfc:after {
        display: block;
        overflow: hidden;
        visibility: hidden;
        width: 0;
        height: 0;
        content: '';
    }

    .bfc:after {
        clear: both;
    }




//overflow
.overflow(@overflow: ellipsis,@space: nowrap,@flow: hidden) {
    text-overflow: @overflow;
    -o-text-overflow: @overflow;
    -moz-text-overflow: @overflow;
    white-space: @space;
    overflow: @flow;
}

.s_ellipsis {
    .overflow();
}

//user-select
.UserSelect(@user-select) {
    -webkit-user-select: @user-select;
    -moz-user-select: @user-select;
    -ms-user-select: @user-select;
    -o-user-select: @user-select;
    user-select: @user-select;
}

// Transitions
.transition(@property: none,@duration: 0,@timingFun: ease,@delay: 0) {
    -webkit-transition: @arguments;
    -ms-transition: @arguments;
    -moz-transition: @arguments;
    -o-transition: @arguments;
    transition: @arguments;
}

.transition-delay(@transition-delay) {
    -webkit-transition-delay: @transition-delay;
    -moz-transition-delay: @transition-delay;
    -o-transition-delay: @transition-delay;
    transition-delay: @transition-delay;
}

.transition-duration(@transition-duration) {
    -webkit-transition-duration: @transition-duration;
    -moz-transition-duration: @transition-duration;
    -o-transition-duration: @transition-duration;
    transition-duration: @transition-duration;
}
// Opacity
.opacity(@opacity) {
    opacity: @opacity;
    @opacity-ie: @opacity * 100;
    filter: ~"alpha(opacity=@{opacity-ie})"; // IE8
}

// Placeholder text
.placeholder(@color: @input-color-placeholder) {
    &:-moz-placeholder {
        color: @color;
    }
    // Firefox 4-18
    &::-moz-placeholder {
        color: @color;
    }
    // Firefox 19+
    &:-ms-input-placeholder {
        color: @color;
    }
    // Internet Explorer 10+
    &::-webkit-input-placeholder {
        color: @color;
    }
    // Safari and Chrome
}

//  box-sizing
.boxSizing(@boxSize) {
    -webkit-box-sizing: @boxSize;
    -moz-box-sizing: @boxSize;
    -ms-box-sizing: @boxSize;
    -o-box-sizing: @boxSize;
    box-sizing: @boxSize;
}

@defalutPosition: center;
//background
.background(@size: contain,@positionH: @defalutPosition,@positionV: @defalutPosition,@repeat: no-repeat) {
    background-size: @size;
    background-repeat: @repeat;
    background-position: @positionH @positionV;
}
